<template>
	<div class="eventTraces">
		<div class="toper">
			<div class="time">
				<h1>{{name}}</h1>
				{{stime|fomartTime}}---{{etime|fomartTime}}
			</div>
			<el-button @click="delTopic(id)" class="delete" icon="delete">删除专题</el-button>
			<div class="eventTraces-menu">
				<div class="item"><router-link to="evens">事件概述</router-link></div>
				<div class="item"><router-link to="media">舆情列表</router-link></div>
				<div class="item"><router-link to="chart">图表分析</router-link></div>
				<div class="item"><router-link to="topicUpdate">专题修改</router-link></div>
			</div>
		</div>
		<router-view class=""></router-view>
	</div>
</template>
<script>
import { mapGetters } from 'vuex'
	export default{
		name:'eventTraces',
		data(){
			return{
				id:this.$store.state.Topic.topicId||localStorage.topicId
			}
		},
		computed:{
			name(){
				if(this.$store.state.Topic.name==''){
					return localStorage.topicName
				}else{
					return this.$store.state.Topic.name
				}
			},
			stime(){
				if(this.$store.state.Topic.startTime==''){
					return localStorage.topicsTime
				}else{
					return this.$store.state.Topic.startTime
				}
			},
			etime(){
				if(this.$store.state.Topic.endTime==''){
					return localStorage.topiceTime
				}else{
					return this.$store.state.Topic.endTime
				}
				
			}
		},
		methods:{
			delTopic:function(topicId){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.post('/vrv-monitor-platform-web/topic/delete',{
						id:topicId
					}).then((res)=>{
						if (res.body.success==true) {
							this.$message('删除成功');
							this.$router.push('/topic');
						};
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			back(){
				this.$router.back(-1)
			}
		},
		filters: {
		    fomartTime: function (value) {
		        let date = new Date(value);
		        let m = date.getMonth()+1
		        if(m<10){
		        	m="0"+m
		        }
		        let d = date.getDate()
		        if(d<10){
		        	d="0"+d
		        }
    			return date.getFullYear()+"/"+m+"/"+d;
			}
		}
	}
</script>
<style scoped>
	.eventTraces{
		background: #fff;
		min-height: 100%;
		min-width: 1040px;
	}
	.toper{
		position: relative;
		height: 8.87rem;
	}
	.time{
		float: left;
		height: 6.25rem;
		text-align: center;
		color: #666;
		font-size: 0.88rem;
		padding: 1.8rem;
	}
	.time h1{
		padding: 0;
		margin: 0;
		color: #555;
		font-size: 1.3rem;
		margin-bottom: 0.3rem;
		letter-spacing: 2px;
	}
	.delete{
		width: 7.5rem;
		height: 2.5rem;
		color: #959595;
		margin-top:2.3rem;
		margin-left: 3rem;
	}
	.eventTraces-menu{
		position: absolute;
		width: 100%;
		display: flex;
		bottom: 0;
		height: 2.68rem;
		border-bottom: 1px solid #dcdcdc;
		padding-left: 2rem;
		box-sizing: border-box;
	}
	.item{
		width: 7.5rem;
		border-right: 1px solid #fff;
		background: #eee;
		border-radius: 0.3rem 0.3rem 0 0;
		line-height: 2.68rem;
		font-size: 0.88rem;
		color: #555;
		text-align: center;
		margin-right: 0.6rem;

	}
	.item a{
		display:block;
		height: 100%;
		text-decoration: none;
		color: #555;
	}
	.item .router-link-active{
		border-radius: 0.31rem 0.31rem 0 0;
		color: #e85a47;
		font-weight: bold;
		background: #fff;
		border:1px solid #dcdcdc;
		border-bottom:0; 
	}
	.item:last-child{
		border-right: 0;
	}
	.back{
		float: right;
		width: 5rem;
		height: 2.1rem;
		padding: 0;
		line-height: 2.1rem;
		margin-top: 1.8rem;
		margin-right: 2rem;
	}
</style>